<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、var</h2>
  <div>在ES5中，顶层对象的属性和全局变量是等价的，用var声明的变量既是全局变量，也是顶层变量

    注意：顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象</div>
  <br>
  <div>使用var声明的变量存在变量提升的情况</div>
  <br>
  <div>使用var，我们能够对一个变量进行多次声明，后面声明的变量会覆盖前面的变量声明</div>
  <br>
  <div>在函数中使用使用var声明变量时候，该变量是局部的</div>
  <br>
  <div>而如果在函数内不使用var，(不声明直接赋值)该变量是全局的</div>
  <h2>二、let</h2>
  <div>用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效</div>
  <br>
  <div>不存在变量提升</div>
  <br>
  <div>相同作用域，let不允许在相同作用域中重复声明</div>
  <h2>三、const</h2>
  <div>const声明一个只读的常量，一旦声明，常量的值就不能改变</div>
  <br>
  <div>const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据(指向)不得改动</div>
  <h2>四、区别</h2>
  <div>var、let、const三者区别可以围绕下面五点展开：</div>
  <ul>
    <li>变量提升</li>
    <li>暂时性死区</li>
    <li>块级作用域</li>
    <li>重复声明</li>
    <li>修改声明的变量</li>
    <li>使用</li>
  </ul>
  <h4>变量提升</h4>
  <div>var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined</div>
  <div>let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错</div>
  <h4>暂时性死区</h4>
  <div>var不存在暂时性死区</div>
  <div>let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量</div>
  <h4>块级作用域</h4>
  <div>var不存在块级作用域</div>
  <div>let和const存在块级作用域</div>
  <h4>重复声明</h4>
  <div>var允许重复声明变量</div>
  <div>let和const在同一作用域不允许重复声明变量</div>
  <h4>修改声明的变量</h4>
  <div>var和let可以</div>
  <div>const声明一个只读的常量。一旦声明，常量的值就不能改变</div>
  <h4>使用</h4>
  <div>能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var</div>
</body>
</html>